<script setup>
import layoutSlot from '@/components/layoutSlot.vue';
import outLine from '@/components/outLine.vue'
import { userUpdatePwdService } from '@/api/user.js'
import { ref } from 'vue'

// 表单数据
const psdForm = ref()

// 密码数据
const passwordInfo = ref({
    oldPassword: '',
    newPassword: '',
    rePassword: ''
})

// 校验规则
const rules = {
    oldPassword: [
        { required: true, message: '旧密码不能为空', trigger: 'blur' },
        { pattern: /^.{6,11}$/, message: '请输入6-11位的非空字符', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '新密码不能为空', trigger: 'blur' },
        { pattern: /^.{6,11}$/, message: '请输入6-11位的非空字符', trigger: 'blur' }
    ],
    rePassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
        validator: (rule, value, callback) => {
            if (value !== passwordInfo.value.newPassword) {
                callback(new Error('两次输入的密码不一致'))
            }
            else {
                callback()
            }
        },
        trigger: 'blur'
    }
    ]
}

// 修改密码
const updatePwd = async() => {
    const {data} = await userUpdatePwdService(passwordInfo.value)
    if (data.status === 0) {
        ElMessage.success(data.message)
    } else {
        ElMessage.error(data.message)
    }
}

// 确认修改按钮
const submitBtn = async() => {
    await psdForm.value.validate()
    updatePwd()
}
</script>

<template>
    <div class="contact">
        <layoutSlot>
            <template #title>重置密码</template>
            <template #main>
                <outLine></outLine>
                <el-form ref="psdForm" label-width="80px" style="width: 500px;" :model="passwordInfo" :rules="rules">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input v-model="passwordInfo.oldPassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="passwordInfo.newPassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="rePassword">
                        <el-input v-model="passwordInfo.rePassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitBtn">确认修改</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </layoutSlot>
    </div>
</template>